<template>
  <zyInfoPanel title="收寄件批量导入" :showUnfoldButton="false" class="receiveSendImport">
    <div class="stepArea">
      <div class="stepItem">
        <div class="stepText">1.点击【收寄件批量导入模板下载】，下载</div>
        <div class="stepContent">
          <zy-button text-button type="primary" @click="downloadTemplate">下载模板</zy-button>
        </div>
      </div>
      <div class="arrow">
        <img src="@/assets/arrow.png" alt="">
      </div>
      <div class="stepItem">
        <div class="stepText">2.点击【选取文件】，选择已填写完成的收寄件批量导入文件。</div>
        <div class="stepContent">
          <el-upload class="upload-demo uploading_list " ref="upload"
                     action="https://jsonplaceholder.typicode.com/posts/"
                     :before-remove="beforeRemove"
                     :file-list="fileList"
                     :on-change="changeFile"
                     :multiple="false"
                     :limit="1"
                     accept=".xls, .xlsx"
                     :auto-upload="false">
            <zy-button text-button type="primary">选取文件</zy-button>
          </el-upload>
        </div>
      </div>
      <div class="arrow">
        <img src="@/assets/arrow.png" alt="">
      </div>
      <div class="stepItem">
        <div class="stepText">3.点击【上传文件】把选择的文件上传的目</div>
        <div class="stepContent">
          <div class="btnArea">
            <zy-button text-button type="primary" @click="submitFile" class="btn">上传文件</zy-button>
            <zy-button text-button :disabled="disabled" class="btn">下载</zy-button>
          </div>
          <div class="tip">{{tipText}}</div>
        </div>
      </div>
    </div>
    <div class="tipArea">
      <div class="tipItem">注：上传文件不超过500kb</div>
      <div class="tipItem">批量录入时请务必按要求输入正确的收件信息，否则会导致收件信息导入失败</div>
      <div class="tipItem">批量导入文件上传后若显示失败，可点击（下载）按钮将已经上传的文件下载下来，上面会标识出错误信息所在位置以及错误原因描述，请根据指导进行修改。</div>
    </div>
  </zyInfoPanel>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		name: "CReceiveSendImport",
		props: {},
		data() {
			return {
				disabled: true,
				tipText: '',
				fileList: []
			};
		},
		computed: {
			...mapGetters(['getToken'])
    },
		watch: {},
		components: {},
		methods: {
			beforeRemove() {
				this.fileList = [];
			},
			changeFile(file) {
				this.fileList[0] = file.raw || {};
			},
			submitFile(){
				var formData = new FormData();
				formData.append("token", this.getToken);
				formData.append("file", this.fileList[0]);
				this.$axios.post(this.$api.c_uploadLogistic, {
					file: this.fileList[0],
          token: this.getToken,
					isFile: true
        }).then(res => {
					if (res.code == 200) {
						this.$message.success('上传成功！');
					} else {
						this.tipText = res.msg;
						this.disabled = false;
					}
				})
      },
			downloadTemplate(){
				this.$import_excal(this.$config.serverURL + 'template/收件信息模板.xlsx')
      }
    },
		mounted() {
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/cooperate/receiveSend/receiveSendImport/index.less">

</style>
